<template>
  <div class="counter_container">
    <!-- <Header /> -->
    <div class="topBar">
      <div class="topBar-left">
        <i class="el-icon-back"></i>
        返回
        <el-divider direction="vertical"></el-divider>
        <p>付款</p>
      </div>
      <div>123</div>
    </div>

    <div v-if="Object.keys(countData).length == 0 ? true : false"
      class="el-skeleton-container">
      <el-empty description="啥也没有，快去购物吧"></el-empty>
    </div>

    <div v-else>
      <div class="counterCart">
        <div class="counterInfo">
          <p>选择您的地址:</p>
          <el-select @change="changeAddress"
            v-model="value"
            placeholder="请选择地址">
            <el-option v-for="(item,index) in tableAddressList"
              :key="index"
              :label="(item.name + '  ' + item.phone + '  ' + item.province + ' ' + item.detali)"
              :value="index">
              <div>
                <span v-if="item.isMor==true">
                  <el-tag size="mini"
                    type="danger">默认地址</el-tag>
                  <el-divider direction="vertical"></el-divider>
                </span>
                <el-tag size="mini">{{ item.name }}</el-tag>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.phone }}</span>
                <el-divider direction="vertical"></el-divider>
                <i class="el-icon-location"></i>
                <span>{{ item.province }}</span>
                <span>{{ item.detali }}</span>
              </div>
            </el-option>
          </el-select>
        </div>
        <!--当前地址  -->
        <div class="counterInfo"
          v-if="currentAddressInfo!=null">
          <el-descriptions :title="currentAddressInfo.aname">
            <el-descriptions-item label="手机号">{{currentAddressInfo.aphone}}</el-descriptions-item>
            <el-descriptions-item label="居住地">{{currentAddressInfo.address+currentAddressInfo.ud1+currentAddressInfo.ud2}}</el-descriptions-item>
            <el-descriptions-item label="邮编">{{currentAddressInfo.arecode}}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="counterInfo">
          <el-table :data="countData"
            style="width: 100%">
            <el-table-column type="index"
              label="序号"
              width="50"></el-table-column>
            <el-table-column label="商品"
              width="180">
              <template slot-scope="scope">
                <img style="width:70px"
                  :src="scope.row.commodity.picture">
              </template>
            </el-table-column>
            <el-table-column label="商品"
              width="180"
              prop="commoditycolor"></el-table-column>
            <el-table-column label="单价"
              prop="price"
              width="180"></el-table-column>
            <el-table-column label="数量"
              width="180">
              <template slot-scope="scope">
                <el-link type="info">×{{scope.row.commoditysum}}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="规格"
              width="180">
              <template slot-scope="scope">
                <el-link type="info">{{scope.row.commcolor+' | '+scope.row.commodguige}}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="小计"
              width="180">
              <template slot-scope="scope">
                <el-link type="info">{{Math.floor(scope.row.commoditysum * scope.row.price * 100) / 100}}元</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="tabBar-right">
          <p>
            共计:
            <span>{{ countGoods() }}元</span>
          </p>
          <button @click="pay()">付款</button>
        </div>
      </div>
    </div>

    <!-- 购买成功对话框 -->
    <el-dialog title="结果"
      :visible.sync="resultDialog"
      width="30%">
      <el-result icon="success"
        title="购买成功"
        subTitle="可在代发货中掌握物流情况">
        <template slot="extra">
          <el-button type="primary"
            size="medium"
            @click="exit()">返回</el-button>
        </template>
      </el-result>
    </el-dialog>
  </div>
</template>

<script>
import { getUaddresslist, getShoppingcatByGW, Buy } from '@/utils/api/api.js';
export default {
  data() {
    return {
      uid: '',
      //地址信息列表
      addressList: [],
      //下拉框地址
      tableAddressList: [],
      //地址下标
      value: '',
      //结算页中的商品数据
      countData: [],
      //当前选中的地址信息
      currentAddressInfo: null,
      
      resultDialog: false,
    };
  },
  methods: {
    //获取地址
    initAddressList() {
      getUaddresslist(this.uid).then(resp => {
        this.addressList = resp.sku;
        this.tableAddressList = resp.sku.map((item,index) => {
          if(item.mor == true){
            this.currentAddressInfo=item
          }
          return {
            value: item.aid,
            name: item.aname,
            phone: item.aphone,
            addressId: item.aid,
            province: item.address + item.ud1 + item.ud2,
            detali: item.taddress,
            isMor: item.mor,
          };
        });
      });
    },
    //获取结算数据
    getCountByShoppingCart(idxArr) {
      // console.log(idxArr.sku);
      let goodsList = [];
      idxArr.forEach(item => {
        //获取购物车的comid至结算
        getShoppingcatByGW(item).then(resp => {
          goodsList.push(resp.msg);
        });
      });
      // console.log(goodsList);
      this.countData = goodsList;
    },
    //下拉框选中事件
    changeAddress(index) {
      this.currentAddressInfo = this.addressList[index];
      // console.log(this.currentAddressInfo);
    },
    //计算价格
    countGoods() {
      let price = 0;
      this.countData.forEach(item => {
        price += Math.floor(item.price * item.commoditysum * 100) / 100;
      });
      return price;
    },
    //付款
    pay() {
      if (this.currentAddressInfo == null) {
        this.$message.error('请选择地址');
      } else {
        this.countData.forEach(item => {
          Buy(this.uid, item.commodityid, 2).then(resp => {
            console.log(resp);

            if (resp.code == 200) {
              this.resultDialog = true;
              // console.log('succes');
            } else {
            }
          });
        });
      }
    },
    exit() {
      this.resultDialog = false;
      this.$router.push({
        path: '/home',
      });
    },
  },
  created() {
    const uid = JSON.parse(localStorage.getItem('user'));
    this.uid = uid.uid;
    Object.keys(this.$route.query).length >= 1
      ? this.getCountByShoppingCart(this.$route.query.idx)
      : null;
    // this.getCountByShoppingCart(this.$route.query.idx)
    this.initAddressList();
  },
};
</script>

<style lang="scss" scoped>
@import './counter.scss';

:deep(.el-descriptions__body:hover, .el-descriptions:hover) {
  background-color: #f8f8f8;
}
.tabBar-right {
  display: flex;
  justify-content: right;
  align-items: center;
  background-color: #f8f8f8;

  p {
    margin-right: 20px;

    span {
      color: orange;
      font-size: 30px;
    }
  }

  button {
    border: none;
    color: #fff;
    font-size: 20px;
    background-color: orange;
    box-sizing: border-box;
    padding: 10px 40px;
    cursor: pointer;
  }
}
</style>